const template = document.createElement("template");
template.innerHTML = /*html*/ `
      <link rel="stylesheet" href="../common/style/vars.css"></link>
      <style>
        :host {
          width: 110px;
          display: block;
          background-color: var(--bg-color);
          color: var(--font-color);
          border-radius: 10px;
        }

        :host *{
          box-sizing: border-box;
        }


        ul,
        li {
          list-style: none;
          padding: 5px;
          margin: 0;
        }

        .menu-box li {
          font-size: 14px;
          border-radius: 3px;
          text-align: justify;
          text-align-last: justify;
          cursor: pointer;
          padding: 5px 15px;
          
        }

        .menu-box li ~ li {
          border-top: 1px solid var(--border-line);
        }


        .menu-box li:hover {
          background-color: var(--bg-select);
          box-shadow: 0 0 5px var(--shadow-color);
          color: var(--font-active);
        }

        .menu-box .menu-customize {
          padding: 0;
          border: none;
        }

        .menu-box .menu-customize:hover {
          background-color: transparent;
        }
      </style>
      <ul class="menu-box">
        <li class="menu-edit">编辑</li>
        <li class="menu-customize">
          <slot></slot>
        </li>
        <li class="menu-move">移动</li>
        <li class="menu-top">置顶</li>
        <li class="menu-delete">删除</li>
      </ul>
`;
// <li class="menu-lock">锁定</li>
export default class LiuMenu extends HTMLElement {

  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);

    const menuMoveEl = content.querySelector(".menu-move");
    const menuEdit = content.querySelector(".menu-edit");
    const menuTop = content.querySelector(".menu-top");
    const menuLock = content.querySelector(".menu-lock");
    const menuDelete = content.querySelector(".menu-delete");

    this.menuCustomize = content.querySelector(".menu-customize");
    this.slotEl = content.querySelector("slot");

    if(window.utools){
      let bool = window.utools.isDarkColors();
      if(bool){
        this.classList.add('dark')
      }else{
        this.classList.add('light')
      }
    }
    

    if (window.ipcRenderer) {
      window.ipcRenderer.on("isAlwaysOnTop", (event, bool) => {
        if (bool) {
          menuTop.innerText = '取消置顶'
        } else {
          menuTop.innerText = '置顶'
        }
      });
      // window.ipcRenderer.sendTo( window.senderId,"isAlwaysOnTop");
    }

    if (this.getAttribute("type")) {
      let typeJson = this.getAttribute("type");
      let type = JSON.parse(typeJson);
      type.forEach((item) => {
        content.querySelector(".menu-" + item).style.display = "none";
      });
    }


    
    window.addEventListener("blur", function () {
      if(window.ipcRenderer){
        window.ipcRenderer.sendTo( window.senderId,"blur");
      }
    });


    menuMoveEl.onclick = function(){
      if(window.ipcRenderer){
        window.ipcRenderer.sendTo( window.senderId,"move");
      }
    }

    menuEdit.onclick  = function(){
      if(window.ipcRenderer){
        window.ipcRenderer.sendTo( window.senderId,"edit");
      }
    }

    menuTop.onclick = function(){
      if(window.ipcRenderer){
        window.ipcRenderer.sendTo( window.senderId,"top");
      }
    }

    // menuLock.onclick = function(){
    //   if(window.ipcRenderer){
    //     window.ipcRenderer.sendTo( window.senderId,"lock");
    //   }
    // }

    menuDelete.onclick = function(){
      if(window.ipcRenderer){
        window.ipcRenderer.sendTo( window.senderId,"delete");
      }
    }

    shadow.appendChild(content);
  }


  updateSlotContent(){
    const slotContent = this.slotEl.assignedNodes({flatten: true})

    if (slotContent.length > 0) {
      this.menuCustomize.style.padding = '5px 15px'
    }
  }

  async connectedCallback() {
    this.updateSlotContent()
  }
}
